import React, { Component } from 'react';
import {
  Avatar, Button, Card, Checkbox, Col,
  DatePicker, Drawer, Form, Icon, Input,
  InputNumber, Modal, Popover, Radio, Row,
  Select, Switch, Tooltip, Upload,
} from 'antd';
import { connect } from 'dva';
import PageHeaderLayout from '@/components/PageHeaderWrapper';
import StandardTable from "@/components/StandardTable";
import SearchForm from "../../utils/searchForm";
import { pageSize } from "../../../config";
import tools from "../../utils";
import moment from "moment/moment";

const pageTitle = '员工信息';
const dlgTitle = '员工';
const reqApi = 'info';
const formItemLayout = {
  labelCol: { md: 3, xs: 7 },
  wrapperCol: { md: 21, xs: 17 },
};
const formItemLayout2 = {
  labelCol: { md: 6, xs: 8 },
  wrapperCol: { md: 18, xs: 16 },
};
const politicsData = [
  ['0', '群众'],
  ['1', '中共党员'],
  ['2', '中共预备党员'],
  ['3', '共青团员'],
  ['4', '民革党员'],
  ['5', '民盟盟员'],
  ['6', '民建会员'],
  ['7', '民进会员'],
  ['8', '农工党党员'],
  ['9', '致公党党员'],
  ['A', '九三学社社员'],
  ['B', '台盟盟员'],
  ['C', '无党派人士'],
];
const politicsMapping = {};
const cultureData = [
  ['0', '本科及以上'],
  ['1', '大专'],
  ['2', '高中、职高或中专'],
  ['3', '初中'],
  ['4', '小学及以下'],
];
const cultureMapping = {};
const marriageData = [
  ['1', '已婚'],
  ['0', '未婚'],
  ['2', '离婚'],
  ['3', '丧偶'],
];
const marriageMapping = {};

class page extends Component {
  state = {
    loading: false,
    visible: false,
    dialogLoading: false,
    dialogTitle: "",
    dialogAction: "",
    selectedRows: [],
    searchs: [],
    pagination: {
      currentPage: 1,
      pageSize,
      onShowSizeChange: (_, size) => {
        const { pagination } = this.state;
        pagination.pageSize = size;
      },
    },
    editId: "", // 编辑时记下此id, 等到保存时把此id带过去
    uploading: false, // 是否正在上传身份证复印件图片
    idCardLimit: '',
  };

  componentWillMount() {
    console.clear();

    const { props } = this;

    props.dispatch({
      type: reqApi + '/jobs',
      payload: {
        currentPage: 1,
        pageSize: 1000,
      },
    }).then(this.funcGetListData);

    for (let i = 0; i < politicsData.length; i += 1) {
      const [key, value] = politicsData[i];
      politicsMapping[key] = value;
    }
    for (let i = 0; i < cultureData.length; i += 1) {
      const [key, value] = cultureData[i];
      cultureMapping[key] = value;
    }
    for (let i = 0; i < marriageData.length; i += 1) {
      const [key, value] = marriageData[i];
      marriageMapping[key] = value;
    }
  }

  // 获取列表数据
  funcGetListData = () => {
    this.setState({ loading: true });

    const { state } = this;
    const { searchs, pagination } = state;
    const { currentPage, pageSize } = pagination;

    const { dispatch } = this.props;
    dispatch({
      type: reqApi + "/json",
      payload: {
        currentPage,
        pageSize,
        searchs,
      },
    }).then(() => this.setState({ loading: false }));
  };

  // 表格列
  columns = [
    {
      title: "岗位名称",
      dataIndex: "jobName",
      width: 200,
    },
    {
      title: "正式工资",
      dataIndex: "pay1",
      width: 130,
      render: (text) => text > 0 ? '￥' + text.toFixed(2) + '元' : '',
    },
    {
      title: "试用工资",
      dataIndex: "pay0",
      width: 130,
      render: (text) => text > 0 ? '￥' + text.toFixed(2) + '元' : '',
    },
    {
      title: "姓名",
      title2: "员工姓名",
      dataIndex: "name",
      type: "text",
      width: 100,
      render: (text, record) => (
        <div>
          {record.idCardPicture ? (
            <Popover content={<img src={record.idCardPicture} width="100%" alt="" />}>
              <Avatar
                icon="picture"
                shape="square"
                size="small"
                src={record.idCardPicture}
                style={{ backgroundColor: "gainsboro", marginRight: 8 }}
              />
            </Popover>
          ) : null}
          <a
            title="编辑"
            onClick={() => {
              this.funcOpenForm(record);
              this.setState({ editId: record.id });
            }}>
            {text}
          </a>
        </div>
      ),
    },
    {
      title: "档案号",
      title2: "档 案 号",
      dataIndex: "num",
      type: 'text',
      width: 110,
    },
    {
      title: "性别",
      title2: "员工性别",
      dataIndex: "sex",
      width: 62,
      type: "select",
      sub: [["1", "男"], ["0", "女"]],
      render: (text) => text === "1" ? '男' : '女',
    },
    {
      title: "出生年月",
      dataIndex: "birthday",
      width: 120,
      render: (text) => text === '1900-01-01 00:00:00' ? '' :
        <span style={{ color: "darkgray" }}>{text.substr(0, 10)}</span>,
    },
    {
      title: "年龄",
      dataIndex: "age",
      width: 70,
      render: (text) => text + ' 岁',
    },
    {
      title: "身份证号",
      dataIndex: "idCardNum",
      width: 200,
      render: (text, record) => {
        const day = moment(record.idCardLimit).diff(moment(), 'day');
        let result = text;
        if (day <= 90) {
          if (day <= 0) {
            result = (
              <Tooltip title='已过期'>
                <span style={{ color: 'red' }}>
                  {text}
                </span>
              </Tooltip>
            );
          } else {
            result = (
              <Tooltip title={'在 ' + day + ' 天后过期'}>
                <span style={{ color: 'orange' }}>{text}</span>
              </Tooltip>
            );
          }
        }
        return result;
      },
    },
    {
      title: "入厂日期",
      dataIndex: "id",
      width: 120,
      render: (_, record) => record.addTime === '1900-01-01 00:00:00' ? '' :
        <span style={{ color: "darkgray" }}>{record.addTime.substr(0, 10)}</span>,
    },
    {
      title: "家庭住址",
      dataIndex: "address",
    },
    {
      title: "户口性质",
      dataIndex: "regType",
      width: 100,
      type: "select",
      sub: [["1", "农业户口"], ["0", "非农户口"]],
      render: (text) => text === "1" ? '农业户口' : '非农户口',
    },
    {
      title: "联系电话",
      dataIndex: "phone",
      width: 140,
    },
    {
      title: "政治面貌",
      dataIndex: "politics",
      width: 120,
      // type: "select",
      // sub: politicsData,
      render: (text) => politicsMapping[text],
    },
    {
      title: "文化程度",
      dataIndex: "culture",
      width: 150,
      type: "select",
      sub: cultureData,
      render: (text) => cultureMapping[text],
    },
    {
      title: "婚姻状况",
      dataIndex: "marriage",
      width: 100,
      type: "select",
      sub: marriageData,
      render: (text) => marriageMapping[text],
    },
    {
      title: "体检日期",
      dataIndex: "physicalDate",
      width: 120,
      render: (text) => text === '1900-01-01 00:00:00' ? '' :
        <span style={{ color: "darkgray" }}>{text.substr(0, 10)}</span>,
    },
    {
      title: "学历证明",
      dataIndex: "edu",
      width: 100,
      render: (text) => text === "1" ? '有' : '',
    },
    {
      title: "入职承诺书",
      dataIndex: "promise",
      width: 110,
      render: (text) => text === "1" ? '有' : '',
    },
    {
      title: "押金",
      dataIndex: "cashPledgeNum",
      width: 130,
      render: (text) => text > 0 ? '￥' + text.toFixed(2) + '元' : '',
    },
    {
      title: "备注",
      dataIndex: "addTime",
      width: 200,
      type: 'date',
      startTime: '2000-01-01 00:00:00',
      render: (_, record) => record.remark,
    },
  ];

  // 记录查询表单提交
  funcOnSubmitSearch = (searchs) => {
    const { state } = this;
    state.pagination.current = 1;
    this.setState({ searchs }, this.funcGetListData);
  };

  // 弹出表单
  funcOpenForm = (record) => {
    const act = record ? "edit" : "create";
    this.setState({
      visible: true,
      dialogTitle: tools.funcDlgTitle(dlgTitle, act, true),
      dialogAction: act,
      uploading: false,
    }, () => {
      const { props } = this;
      if (act === "edit") {
        const model = { ...record }; // 复制一份，不污染涞源
        if (model.addTime) model.addTime = moment(model.addTime, 'YYYY-MM-DD');
        if (model.birthday) model.birthday = moment(model.birthday, 'YYYY-MM-DD');
        if (model.physicalDate) model.physicalDate = moment(model.physicalDate, 'YYYY-MM-DD');
        if (model.idCardLimit) {
          model.idCardLimit2 = model.idCardLimit === '9999-12-31 00:00:00';
          model.idCardLimit = moment(model.idCardLimit, 'YYYY-MM-DD');
        }
        if (model.edu === '1') model.edu = true;
        else delete model.edu;
        if (model.promise === '1') model.promise = true;
        else delete model.promise;
        props.form.setFieldsValue(model);
      } else {
        props.form.resetFields();
      }

      setTimeout(() => {
        if (this.inputNameRef) this.inputNameRef.focus();
      }, 0);
    });
  };

  // 删除
  funcDelete = () => {
    const { state } = this;
    let names = [],
      ids = [];
    for (let i = 0; i < state.selectedRows.length; i += 1) {
      const item = state.selectedRows[i];
      const { id, name } = item;
      names.push(name);
      ids.push(id);
    }

    Modal.confirm({
      title: "删除？",
      content: (
        <div>
          <div>你即将删除以下记录：</div>
          <div>{names + ""}</div>
          <div>请确认是否删除？</div>
        </div>
      ),
      okText: "是",
      okType: "danger",
      cancelText: "否",
      onOk: () => {
        this.setState({ loading: true });

        const { props } = this;
        props.dispatch({
          type: reqApi + "/dele",
          payload: { ids: ids + "" },
        }).then(() => {
          const { props } = this;
          const { success } = props[reqApi];
          if (success) {
            this.funcGetListData();
            this.setState({ selectedRows: [] }); // 成功删除后清空表格行选择
          }
        });
      },
    });
  };

  // 保存
  funcSave = () => {
    const { state, props } = this;
    props.form.validateFields((error, values) => {
      if (error) return error;

      this.setState({ dialogLoading: true });

      const model = { ...values };
      if (state.dialogAction === "edit") {
        model.id = state.editId;
      }
      for (let i in model) {
        if (model[i] === undefined) delete model[i];
      }
      if (model.addTime) model.addTime = model.addTime.format('YYYY-MM-DD');
      if (model.birthday) model.birthday = model.birthday.format('YYYY-MM-DD');
      if (model.idCardLimit) model.idCardLimit = model.idCardLimit.format('YYYY-MM-DD');
      if (model.physicalDate) model.physicalDate = model.physicalDate.format('YYYY-MM-DD');

      props.dispatch({
        type: reqApi + "/save",
        payload: {
          action: state.dialogAction,
          model,
        },
      }).then(() => {
        this.setState({ dialogLoading: false });

        const { props } = this;
        const { success } = props[reqApi];
        if (success) {
          this.setState({ visible: false });
          this.funcGetListData();
        }
      });
    });
  };

  // 检查图片是否有效
  funcCheckFile = (file) => {
    const size0 = 3;
    const size = 1024 * 1024 * size0;

    let isOk = true;
    if (file.size > size) {
      message.error(file.name + " 不能超过 " + size0 + "MB");
      isOk = false;
    }

    if (isOk) {
      const reader = new FileReader();
      reader.onload = (e) => this.funcDisposeFile(e, file, this.funcUploadFile);
      reader.readAsDataURL(file);
    } else this.setState({ uploading: false });
    return false;
  };

  // 在源图基础上附加水印并生成缩略图，防止网站上的产品图片被随意盗用
  funcDisposeFile = (e, file, callback) => {
    const b64 = e.target.result;
    const img = new Image();
    img.onload = () => {
      // 生成加了水印的源图
      const canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      const ct = canvas.getContext("2d");
      ct.drawImage(img, 0, 0, img.width, img.height);
      ct.font = "12px Arial";
      ct.fillStyle = "#ffffff33";
      const x = img.width / 2 - corpName.length * 6;
      // 添加3处水印, 有效保护公司产品图片的安全
      ct.fillText(corpName, x, 12); // 上
      ct.fillText(corpName, x, img.height / 2 + 6); // 中
      ct.fillText(corpName, x, img.height - 2); // 下
      const b64mark = canvas.toDataURL(file.type);

      // 生成缩略图(供列表页面使用，节省流量)
      if (img.width > img.height) {
        const ratio = img.width / img.height;
        if (img.width > smallImageLimitSize) {
          img.width = smallImageLimitSize;
          img.height = Math.round(smallImageLimitSize / ratio);
        }
      } else {
        const ratio = img.height / img.width;
        if (img.height > smallImageLimitSize) {
          img.height = smallImageLimitSize;
          img.width = Math.round(smallImageLimitSize / ratio);
        }
      }
      canvas.width = img.width;
      canvas.height = img.height;
      ct.drawImage(img, 0, 0, img.width, img.height);
      const b64sm = canvas.toDataURL(file.type);

      callback(b64mark.split(",")[1], b64sm.split(",")[1], file.name.substr(file.name.lastIndexOf(".") + 1));
    };
    img.src = b64;
  };

  // 开始上传图片
  funcUploadFile = (b64, b64sm, imgType) => {
    const { dialogAction, contentEditId } = this.state;
    const payload = {
      b64,
      b64sm,
      imgType,
    };
    if (dialogAction === "edit") {
      payload.contentId = contentEditId;
    }
    const { dispatch } = this.props;
    dispatch({
      type: "content/upload",
      payload,
    }).then(() => {
      this.setState({ uploading: false });

      const { props } = this;
      const { success, uploadUrl } = props.content;
      if (success) {
        props.form.setFieldsValue({ markImg: uploadUrl });
      }
    });
  };

  render() {
    const { state, props } = this;
    const { getFieldDecorator } = props.form;
    let idCardLimitParams = {};
    if (props.form.getFieldValue('idCardLimit2')) {
      idCardLimitParams = { span: 0 };
    } else {
      idCardLimitParams = { md: 12, sm: 24 };
    }

    return (
      <PageHeaderLayout title={pageTitle}>
        <Card bordered={false} bodyStyle={{ paddingBottom: 0 }}>
          <SearchForm fields={this.columns} onSubmit={this.funcOnSubmitSearch} />
          <Button.Group>
            <Button icon="plus" type="primary" onClick={() => this.funcOpenForm()}>
              {'新增' + dlgTitle}
            </Button>
            <Button icon="delete" type="danger" onClick={this.funcDelete} disabled={state.selectedRows.length === 0}>
              {'删除' + dlgTitle}
            </Button>
          </Button.Group>
          <Button icon="import" style={{ marginLeft: 16 }} onClick={() => {}}>
            批量导入
          </Button>
          <br />
          <br />
          <StandardTable
            bordered
            loading={state.loading}
            columns={this.columns}
            data={{
              list: props[reqApi].data,
              pagination: { ...state.pagination, total: props[reqApi].total },
            }}
            selectedRows={state.selectedRows}
            onSelectRow={(selectedRows) => this.setState({ selectedRows })}
            onChange={(pageParams) => {
              const { pagination } = this.state;
              pagination.currentPage = pageParams.current;
              this.funcGetListData();
            }}
            scroll={{ x: 3000 }}
          />
        </Card>

        <Drawer
          width={800}
          title={state.dialogTitle}
          visible={state.visible}
          onClose={() => this.setState({ visible: false })}
          bodyStyle={{ paddingLeft: 0, paddingRight: 0 }}
          drawerStyle={{ overflow: 'hidden' }}
        >
          <div
            style={{
              height: 'calc(100vh - 130px)',
              overflow: 'auto',
              paddingLeft: 24,
              paddingRight: 24,
            }}
          >
            <Form>
              <Row gutter={8}>
                <Col md={12} sm={24}>
                  <Form.Item label={dlgTitle + '姓名'} {...formItemLayout2}>
                    {getFieldDecorator("name", {
                      rules: [{ required: true, message: '请输入' + dlgTitle + '姓名' }],
                    })(<Input maxLength={10} autoFocus ref={(e) => { this.inputNameRef = e; }} />)}
                  </Form.Item>
                </Col>
                <Col md={12} sm={24}>
                  <Form.Item label='档案号' {...formItemLayout2}>
                    {getFieldDecorator("num", {
                      rules: [{ required: true, message: '请输入' + dlgTitle + '档案号' }],
                    })(<Input maxLength={10} />)}
                  </Form.Item>
                </Col>

                <Col md={12} sm={24}>
                  <Form.Item label="正式工资" {...formItemLayout2}>
                    {getFieldDecorator("pay1", {
                      initialValue: 0,
                    })(<Input type='number' min={0} style={{ width: '100%' }} prefix="￥" suffix="元" />)}
                  </Form.Item>
                </Col>
                <Col md={12} sm={24}>
                  <Form.Item label="试用工资" {...formItemLayout2}>
                    {getFieldDecorator("pay0", {
                      initialValue: 0,
                    })(<Input type='number' min={0} style={{ width: '100%' }} prefix="￥" suffix="元" />)}
                  </Form.Item>
                </Col>

                <Col md={12} sm={24}>
                  <Form.Item label="联系电话" {...formItemLayout2}>
                    {getFieldDecorator('phone', {
                      rules: [{ required: true, message: '请输入' + dlgTitle + '联系电话' }],
                    })(<InputNumber min={13000000000} max={19999999999} style={{ width: '100%' }} />)}
                  </Form.Item>
                </Col>
                <Col md={12} sm={24}>
                  <Form.Item label="家庭住址" {...formItemLayout2}>
                    {getFieldDecorator('address')(<Input maxLength={255} />)}
                  </Form.Item>
                </Col>

                <Col md={12} sm={24}>
                  <Form.Item label='所在岗位' {...formItemLayout2}>
                    {getFieldDecorator('jobId', {
                      rules: [{ required: true, message: '请选择' + dlgTitle + '所在岗位' }],
                    })(
                      <Select>
                        {props[reqApi].jobData.map((item) => {
                          const { id, name } = item;
                          return (
                            <Select.Option key={id}>
                              {name}
                            </Select.Option>
                          );
                        })}
                      </Select>
                    )}
                  </Form.Item>
                </Col>
                <Col md={12} sm={24}>
                  <Form.Item label='入厂日期' {...formItemLayout2}>
                    {getFieldDecorator('addTime')(
                      <DatePicker
                        format="YYYY-MM-DD"
                        style={{ width: '100%' }}
                        placeholder=''
                        disabledDate={now => now > moment().endOf('day')} // 不允许选择未来
                      />
                    )}
                  </Form.Item>
                </Col>

                <Col md={12} sm={24}>
                  <Form.Item label='性别' {...formItemLayout2}>
                    {getFieldDecorator('sex', {
                      initialValue: '1',
                    })(
                      <Radio.Group buttonStyle='solid'>
                        <Radio.Button value='1'>男</Radio.Button>
                        <Radio.Button value='0'>女</Radio.Button>
                      </Radio.Group>
                    )}
                  </Form.Item>
                </Col>
                <Col md={12} sm={24}>
                  <Form.Item label='出生日期' {...formItemLayout2}>
                    {getFieldDecorator('birthday')(
                      <DatePicker
                        format="YYYY-MM-DD"
                        style={{ width: '100%' }}
                        placeholder=''
                        disabledDate={now => now > moment().endOf('day')} // 不允许选择未来
                      />
                    )}
                  </Form.Item>
                </Col>

                <Col md={12} sm={24}>
                  <Form.Item label="身份证号码" {...formItemLayout2}>
                    {getFieldDecorator('idCardNum', {
                      rules: [{ required: true, message: '请输入' + dlgTitle + '身份证号码' }],
                    })(<Input maxLength={18} />)}
                  </Form.Item>
                </Col>
                <Col md={12} sm={24}>
                  <Form.Item label="身份证电子版" {...formItemLayout2}>
                    {getFieldDecorator("idCardPictureFront")(
                      <Input
                        suffix={
                          state.uploading ? (
                            <Icon type="loading" />
                          ) : (
                            <Upload
                              accept="image/*"
                              showUploadList={false}
                              beforeUpload={(file) => {
                                if (state.uploading) return false;
                                this.setState({ uploading: true }, () => this.funcCheckFile(file));
                              }}>
                              <Tooltip title="上传">
                                <Icon type="upload" />
                              </Tooltip>
                            </Upload>
                          )
                        }
                        disabled={state.uploading}
                      />,
                    )}
                  </Form.Item>
                </Col>

                <Col md={12} sm={24}>
                  <Form.Item label="身份证有效期" {...formItemLayout2}>
                    {getFieldDecorator('idCardLimit2', {
                      valuePropName: 'checked',
                    })(
                      <Checkbox
                        onChange={(e) => {
                          const { checked } = e.target;
                          if (checked) {
                            const idCardLimit = props.form.getFieldValue('idCardLimit');
                            this.setState({ idCardLimit });
                            props.form.setFieldsValue({
                              idCardLimit: moment('9999-12-31', 'YYYY-MM-DD'),
                            });
                          } else {
                            const { idCardLimit } = this.state;
                            if (idCardLimit) {
                              props.form.setFieldsValue({ idCardLimit });
                            } else {
                              props.form.setFieldsValue({ idCardLimit: undefined });
                            }
                          }
                        }}
                      >
                        长期有效
                      </Checkbox>
                    )}
                  </Form.Item>
                </Col>
                <Col {...idCardLimitParams}>
                  <Form.Item label="有效期至" {...formItemLayout2}>
                    {getFieldDecorator('idCardLimit')(
                      <DatePicker
                        format="YYYY-MM-DD"
                        style={{ width: '100%' }}
                        placeholder=''
                        disabledDate={now => now < moment().endOf('day')} // 不允许选择过去
                      />
                    )}
                  </Form.Item>
                </Col>
              </Row>

              <Row gutter={8}>
                <Col md={12} sm={24}>
                  <Form.Item label='户口性质' {...formItemLayout2}>
                    {getFieldDecorator('regType', {
                      initialValue: '1',
                    })(
                      <Radio.Group buttonStyle='solid'>
                        <Radio.Button value='1'>农业户口</Radio.Button>
                        <Radio.Button value='0'>非农户口</Radio.Button>
                      </Radio.Group>
                    )}
                  </Form.Item>
                </Col>
                <Col md={12} sm={24}>
                  <Form.Item label='政治面貌' {...formItemLayout2}>
                    {getFieldDecorator('politics', {
                      initialValue: '0',
                    })(
                      <Select>
                        {politicsData.map((item) => {
                          const [key, value] = item;
                          return (
                            <Select.Option key={key}>
                              {value}
                            </Select.Option>
                          );
                        })}
                      </Select>
                    )}
                  </Form.Item>
                </Col>

                <Col md={12} sm={24}>
                  <Form.Item label='婚姻状况' {...formItemLayout2}>
                    {getFieldDecorator('marriage', {
                      initialValue: '1',
                    })(
                      <Radio.Group buttonStyle='solid'>
                        {marriageData.map((item) => {
                          const [key, value] = item;
                          return (
                            <Radio.Button key={key} value={key}>
                              {value}
                            </Radio.Button>
                          );
                        })}
                      </Radio.Group>
                    )}
                  </Form.Item>
                </Col>
                <Col md={12} sm={24}>
                  <Form.Item label='文化程度' {...formItemLayout2}>
                    {getFieldDecorator('culture', {
                      initialValue: '0',
                    })(
                      <Select>
                        {cultureData.map((item) => {
                          const [key, value] = item;
                          return (
                            <Select.Option key={key}>
                              {value}
                            </Select.Option>
                          );
                        })}
                      </Select>
                    )}
                  </Form.Item>
                </Col>

                <Col md={12} sm={24}>
                  <Form.Item label="学历证明" {...formItemLayout2}>
                    {getFieldDecorator('edu', {
                      initialValue: false,
                      valuePropName: 'checked',
                    })(<Switch checkedChildren='有' unCheckedChildren='无' />)}
                  </Form.Item>
                </Col>
                <Col md={12} sm={24}>
                  <Form.Item label="体检日期" {...formItemLayout2}>
                    {getFieldDecorator('physicalDate')(
                      <DatePicker
                        format="YYYY-MM-DD"
                        style={{ width: '100%' }}
                        placeholder=''
                        disabledDate={now => now > moment().endOf('day')} // 不允许选择未来
                      />
                    )}
                  </Form.Item>
                </Col>

                <Col md={12} sm={24}>
                  <Form.Item label="入职承诺书" {...formItemLayout2}>
                    {getFieldDecorator('promise', {
                      initialValue: false,
                      valuePropName: 'checked',
                    })(<Switch checkedChildren='有' unCheckedChildren='无' />)}
                  </Form.Item>
                </Col>
                <Col md={12} sm={24}>
                  <Form.Item label="押金金额" {...formItemLayout2}>
                    {getFieldDecorator("cashPledgeNum", {
                      initialValue: 0,
                    })(<Input type='number' min={0} style={{ width: '100%' }} prefix="￥" suffix="元" />)}
                  </Form.Item>
                </Col>

                <Col span={24}>
                  <Form.Item label="备注" {...formItemLayout}>
                    {getFieldDecorator("remark")
                    (<Input.TextArea maxLength={255} autoSize={{ minRows: 3, maxRows: 5 }} />)}
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </div>
          <div
            style={{
              borderTop: '1px solid gainsboro',
              padding: '10px 16px',
              textAlign: 'right',
            }}
          >
            <Button onClick={() => this.setState({ visible: false })}>
              {tools.funcDlgBtnCancel()}
            </Button>
            <Button
              type="primary"
              loading={state.dialogLoading}
              style={{ marginLeft: 8 }}
              onClick={this.funcSave}
            >
              {state.dialogLoading ? "保存" : tools.funcDlgBtnSave()}
            </Button>
          </div>
        </Drawer>
      </PageHeaderLayout>
    );
  }
}

const page2 = Form.create()(page);
export default connect(({ info }) => ({ info }))(page2);
